@extends("base.base")
@include('Classify.header')
@section("main")
    <link rel="stylesheet" href="{{asset(env('CDN_HOST')."/public/css/classify/index.css")}}">
    <main id="main" class="main">
        <div class="left">
            <ul class="nav-ul left-ul">
                <li class="left-li left-li-active left-li-index">首页</li>
                @foreach($classify as $key => $value)
                    <li class="left-li left-li-true" data-id="{{$value["commodity_classify_id"]}}">{{$value["classify_name"]}}</li>
                @endforeach
                @foreach($classify as $key => $value)
                    <li class="left-li left-li-true" data-id="{{$value["commodity_classify_id"]}}">{{$value["classify_name"]}}</li>
                @endforeach
                @foreach($classify as $key => $value)
                    <li class="left-li left-li-true" data-id="{{$value["commodity_classify_id"]}}">{{$value["classify_name"]}}</li>
                @endforeach
                {{--@for ($i = 1; $i <50; $i++)--}}
                    {{--<li class="left-li">推荐</li>--}}
                {{--@endfor--}}
            </ul>
        </div>
        <div class="right">
            <div class="right-overflow">
                <div class="right-title">
                <span class="right-title-text">
                    居家分类
                </span>
                </div>
                <ul class="nav-ul right-ul">

                    <div class="clear-both"></div>
                </ul>
            </div>
        </div>
        <script>
            $(".left-li").on('click', function () {
                $(".left-li").attr("class", "left-li")
                $(this).attr("class", "left-li left-li-active")
            })
            $(".left-li-index").click(function () {
                window.location.href = "/home/index"
            })
            $(".left-li-true").on('click',function () {
                loading.show()
                $.post('/api/get_children_classify', {
                    parent: $(this).attr('data-id'),
                    _token: $('meta[name="csrf-token"]').attr('content')
                }, function(data) {
                    if(data.errorCode)
                        alert(data.errorMsg)
                    else
                        children_classify_load(data.data)
                    loading.hide()
                })
            })
            @if (isset($select))
            $(".left-li-true[data-id="+{{$select}}+
            "]"
            ).eq(0).click()
            @else
            $(".left-li-true").eq(0).click()

            @endif
            function children_classify_load(data) {
                var html = ''
                for (val in data) {
                    html += '<a href="/commodity/list/parent/'+data[val].parent_id+'/classify/'+data[val].commodity_classify_id+'">' +
                        '    <li class="right-li" data-id="'+data[val].commodity_classify_id+'">\n' +
                        '         <div class="right-li-box">\n' +
                        '             <div class="right-li-box-img">\n' +
                        '                 <img src="'+data[val].classify_index_img+'"\n' +
                        '                      alt="">\n' +
                        '             </div>\n' +
                        '             <p class="right-li-box-info">'+data[val].classify_name+'</p>\n' +
                        '         </div>\n' +
                        '    </li>' +
                        '</a>'
                }
                html += '<div class="clear-both"></div>'
                $(".right-ul").html(html)
            }
        </script>
    </main>
@endsection
@include('base.bottom_nav')